<template>
  <div class="loginWrap">
      <h1>登录</h1>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="ruleForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="ruleForm.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()"
          >登录</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "../utils/request"
import cookie from "cookie_js"
export default {
  data() {
    return {
      ruleForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
          {
            min: 3,
            max: 16,
            message: "长度在 3 到 16 个字符",
            trigger: "blur",
          },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      
    }
  },
  methods:{
        async getLogin(userinfo){
            const res=await axios.post('/login',userinfo)
            console.log(res)
            const {mes,code,token}=res.data
            if(code===200){
                this.$notify.success(mes)
                cookie.set('token',token)
                this.$router.push('/home')
            }else{
                this.$notify.error(mes)
            }
        },
        submitForm(){
            console.log(this.ruleForm)
            this.getLogin(this.ruleForm)
        }
    }
};
</script>

<style lang='scss'>
    .loginWrap{
        h1{
            text-align: center;
            left: 60px;
        }
        width: 400px;
        height: 300px;
        padding: 30px;
        background: #fff;
        border-radius: 20px;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        border: 1px solid dodgerblue;
    }
</style>